import DOMPurify from 'dompurify';

// 定义组件props的类型接口
interface HtmlDemoProps {
    htmlStr: string;  // 明确指定htmlStr为string类型
  }

export function HtmlDemo({htmlStr}:HtmlDemoProps) {

    const htmlData:string = htmlStr||'<span>默认的html</span>'
// 使用前消毒
const cleanHtml = DOMPurify.sanitize(htmlStr);
    return (
        <div>
            <h3>html测试</h3>
            <div dangerouslySetInnerHTML={{__html:htmlData}}></div>
            <div dangerouslySetInnerHTML={{__html:cleanHtml}}></div>
        </div>
    )
}